<div class="container">
  <form *ngIf="!registered" class="ui form" (ngSubmit)="onSubmit()" #registerForm = "ngForm">
    <h2 class="ui dividing header">Register User</h2>
    <div class="field">
      <label>* Name</label>
      <div class = "two fields">
        <div class="field">
          <input type="text" name="firstName" placeholder="First Name" [(ngModel)]="newUser.firstName" required />
        </div>
        <div class="field">
          <input type="text" name="lastName" placeholder="Last Name" [(ngModel)]="newUser.lastName" required />
        </div>
      </div>
    </div>
    <div class="field">
      <label>* Username/Password</label>
      <div class="three fields">
        <div class="field">
          <input type="text" name="userName" placeholder="User Name" [(ngModel)]="newUser.userName" required />
        </div>
        <div class="field">
          <input type="password" name="password" placeholder="Password" [(ngModel)]="newUser.password" required />
        </div>
        <div class="field">
          <input type="password" name="password" placeholder="Password Again" required />
        </div>
      </div>

    </div>
    <div class="field">
      <label>* Email</label>
      <div class="field">
        <input type="text" name="email" placeholder="email" [(ngModel)]="newUser.email" required />
      </div>
    </div>
    <button type="submit" class="ui button">Register</button>
  </form>

<div *ngIf = "registered">
  <h1>Register Success!</h1>
</div>

</div>
